import React, { Component } from 'react';
import FollowButton from './Component/FollowButton/FollowButton';
import LikeButton from './Component/LikeButton/LikeButton';
import BottomBar from './Component/BottomBar/BottomBar';
import './App.css'
class App extends Component {
  constructor(props) {
    super(props);
    // 各个组件中状态提升到app组件中
    this.state = {
      followStatus: false,
      like: false
    }
    this.handleLike = this.handleLike.bind(this); //this绑定
    this.handleFollow = this.handleFollow.bind(this);
  }
  handleLike(like) {
    this.setState({
      like: like
    });
  }
  handleFollow(followStatus) {
    this.setState({
      followStatus: followStatus
    });
  }
  render() {
    return (
      <div className="App">
        {/* 关注按钮 */}
        <div className="app_follow_button_div">
          <FollowButton followStatus={this.state.followStatus} handleFollow={this.handleFollow}></FollowButton>
        </div>
        {/* 点赞按钮 */}
        <div className="like_button_div">
          <LikeButton  like={this.state.like} handleLike={this.handleLike}></LikeButton>
        </div>
        {/* 底部按钮 */}
        <div>
          <BottomBar followStatus={this.state.followStatus} handleFollow={this.handleFollow}></BottomBar>
        </div>
      </div>
    );
  }
}
export default App;
